<template>
  <!-- 日历热点图容器 -->
  <div id="calendar" class="overflow-x-auto w-full h-60"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { watch } from 'vue'
import { format, subMonths } from 'date-fns'

// 对外暴露的属性值
const props = defineProps({
  value: { // 属性值名称
      type: Object, // 类型为对象
      default: null // 默认为 null
  }
})

// 当前日期
const currentDate = new Date();
// 半年前
const sixMonthsAgo = subMonths(currentDate, 6)

// 格式化后的开始、结束日期
const startDate = format(sixMonthsAgo, 'yyyy-MM-dd')
const endDate = format(currentDate, 'yyyy-MM-dd')

// 日历热点数据
const myData = []

// 初始化日历热点图
const initCalendar = () => {
  // 将传入的数据设置到 myDate 数组中
  let map = props.value
  for (let key in map) {
      myData.push([
          key,
          map[key]
      ]);
  }

  var chartDom = document.getElementById('calendar');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
      visualMap: {
          show: false,
          min: 0,
          max: 10
      },
      calendar: { // 日历显示的范围：开始日期 - 结束日期
          range: [startDate, endDate],
      },
      series: {
          type: 'heatmap',
          coordinateSystem: 'calendar',
          data: myData
      }, 
      gradientColor: [ // 自定义热点颜色，参考了 GitHub 代码提交的颜色
          '#fff',
          '#40c463',
          '#30a14e',
          '#216e39',
      ]
  };

  option && myChart.setOption(option);
}

// 侦听属性, 监听 props.value 的变化，一旦 props.value 发生变化，就调用 initCalendar 初始化日历热点图
watch(() => props.value, () => initCalendar())

</script>
